<template>
  <div class="ques q-a-ques">
    <p class="q-cont">{{quesData.totalSort ? quesData.totalSort + '.' : ''}}<span v-html="quesData.questionContent"></span>{{quesData.score ? '（' + quesData.score + '分）' : ''}}</p>
    <el-input 
      class="q-a-textarea"
      type="textarea"
      resize="none"
      :autosize="{ minRows: 5 }"
      placeholder="请在这里输入答案"
      v-model="content"
      @input="handleContentInput"
      :readonly="showAnswer"
    >
    </el-input>
    <div class="answer-area" v-if="showAnswer">
      <dl>
        <dt>答案：</dt>
        <dd>{{quesData.rightAnswer}}</dd>
      </dl>
      <dl>
        <dt>得分：</dt>
        <dd>{{quesData.studentScore}}</dd>
      </dl>
      <dl>
        <dt>解析：</dt>
        <dd>{{quesData.analysis ? quesData.analysis : '略'}}</dd>
      </dl>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    onChange: Function,
    quesData: Object,
    showAnswer: Boolean
  },
  watch: {
    quesData() {
      this.content = '';
    }
  }
})
export default class QA extends Vue {
  content = '';
  quesData: ObjectT = {};
  showAnswer!: boolean;
  onChange!: (type: number, totalSort: number, value: string) => {}
  created() {
    if (this.showAnswer) {
      this.content = this.quesData.studentAnswer ? this.quesData.studentAnswer : '';
    } else {
      this.content = this.quesData.answer ? this.quesData.answer : '';
    }
    
  }
  // 处理内容change事件
  handleContentInput() {
    if (this.onChange) {
      this.onChange(4, this.quesData.totalSort, this.content);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import './common.scss';

.ques {
  margin-bottom: 42px;
}
.q-cont {
  span {
    p {
      display: inline;
    }
  }
}
.answer-area {
  margin-top: 19px;
}
</style>
<style lang="scss">
.ques {
  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
  }
}
.q-a-ques {
  @include placeholder($text-placeholder, 16px);
  textarea {
    font-size: 16px;
    color: $text-black;
    background: $bg-color-purle;
    &:focus {
      background: transparent;
    }
  }
}
.q-w-ques {
  textarea {
    font-size: 16px;
    color: $text-color;
  }
}
</style>
